<template>
  <div class="device-detail-page flex-col">
    <navbar :back="isBack" :title="isCreate ? '新建地址' : '修改地址'" @goBack="goBack"/>

    <scroll-view class="device-detail-container flex-1" scroll-y>
      <div class="page__bd">
        <div class="weui-cells weui-cells_after-title">
          <div class="weui-cell weui-cell_input">
            <div class="weui-cell__hd">
              <div class="weui-label">姓名</div>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" v-model="name" placeholder="请输入姓名" />
            </div>
          </div>

          <div class="weui-cell weui-cell_input">
            <div class="weui-cell__hd">
              <div class="weui-label">手机号</div>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" v-model="phone" placeholder="请输入手机号" />
            </div>
          </div>

          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd weui-cell__hd_in-select-after">
              <div class="weui-label">收货地址</div>
            </div>
            <div class="weui-cell__bd">
              <picker mode="region" :value="region" @change="bindRegionChange">
                <div class="weui-select weui-select_in-select-after" v-if="region[0]">{{region[0]}} {{region[1]}} {{region[2]}}</div>
                <div class="weui-select weui-select_in-select-after" v-else>请选择收货地址</div>
              </picker>
            </div>
          </div>

          <div class="weui-cell weui-cell_input">
            <div class="weui-cell__hd">
              <div class="weui-label">具体地址</div>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" v-model="detailAddress" placeholder="请输入具体地址" />
            </div>
          </div>
        </div>

        <div class="clear-10"></div>

        <div class="weui-cells weui-cells_after-title">
          <div class="weui-cell weui-cell_switch">
            <div class="weui-cell__bd">设为默认地址</div>
            <div class="weui-cell__ft">
              <switch checked @change = "switchChange" v-if="isDefault" />
              <switch @change = "switchChange" v-else />
            </div>
          </div>
        </div>

        <div class="btn-group">
          <button class="btn" @click="saveAddress">保存</button>
          <button class="btn del" v-if="id > 0" @click="_delAddress">删除</button>
        </div>
      </div>
    </scroll-view>
    <toptips />
  </div>
</template>

<script>
  import global from 'global'
  import navbar from '@/components/navbar'
  import Core from 'core'
  import Common from 'common'
  import { getComponentByTag } from '../../../utils/helper'
  import ZanTopTips from '@/components/zan/toptips'

  export default {
    components: {
      navbar,
      toptips: ZanTopTips
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        navBarHeight: global.state.statusH + global.state.titleH,
        isBack: true,

        id: '',
        name: '',
        phone: '',
        detailAddress: '',
        region: ['', '', ''],
        isDefault: true,
        zanTopTips: {}
      }
    },

    onShow () {
      this.id = this.$root.$mp.query['id']
      console.log(this.id)
      if (this.id > 0) {
        this._getUserAddressDetail(this.id)
      } else {
        this.id = ''
        this.name = ''
        this.phone = ''
        this.detailAddress = ''
        this.region = ['', '', '']
        this.isDefault = true
      }
    },

    methods: {
      goBack () {
        Core.Util.goBack()
      },

      switchChange (e) {
        this.isDefault = !!e.mp.detail.value
      },

      bindRegionChange (e) {
        this.region = e.mp.detail.value
      },

      saveAddress () {
        if (!this.name) {
          getComponentByTag(this, 'toptips').showZanTopTips('请输入姓名！')
          return
        }

        if (!this.phone) {
          getComponentByTag(this, 'toptips').showZanTopTips('请输入手机号！')
          return
        }

        if (!this.region[0]) {
          getComponentByTag(this, 'toptips').showZanTopTips('请选择收货地址！')
          return
        }

        if (!this.detailAddress) {
          getComponentByTag(this, 'toptips').showZanTopTips('请输入具体地址！')
          return
        }

        Core.Api.UserAddress.saveAddress(this.id, this.name, this.phone, this.region[0], this.region[1], this.region[2], this.detailAddress, this.isDefault ? 1 : 0)
          .then(res => {
            Core.Util.goBack()
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _getUserAddressDetail (id) {
        Core.Api.UserAddress.addressDetail(id)
          .then(res => {
            let userAddress = res.user_address
            this.name = userAddress.name
            this.phone = userAddress.phone
            this.detailAddress = userAddress.address
            this.region = [userAddress.province, userAddress.city, userAddress.county]
            this.isDefault = userAddress.is_default
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _delAddress () {
        Core.Api.UserAddress.deleteAddress(this.id)
          .then(res => {
            Core.Util.goBack()
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .device-detail-page {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .device-detail-container {
      height: 100%;
      overflow-y: auto;
    }

    .weui-cell {
      padding-top: 4px;
      padding-bottom: 4px;
    }

    .weui-cell_switch {
      padding-top: 12px;
      padding-bottom: 12px;
    }

    .weui-label, .weui-cell__bd {
      color: rgb(65, 65, 65);
    }

    .btn-group {
      padding: 20px 10px;
      .btn {
        background-color: rgb(252, 123, 10);
        color: #ffffff;
        margin-top: 10px;
        &.del {
          background-color: rgb(252, 59, 7);
        }
      }
    }
  }
</style>
